import React, { Suspense } from "react";
import RouterList from "./routerConfig";
import {
  Route,
  Routes,
  BrowserRouter,
  Navigate,
  HashRouter,
} from "react-router-dom";
interface Props { }

const routerView = (props: Props) => {
  const { mode, router } = RouterList;
  const renderhome = (arr: any) => {
    return (
      arr &&
      arr.map((item: any, index: number) => {
        return (
          <Route
            key={index}
            path={item.path}
            element={
              item.to ? (
                <Navigate to={item.to}></Navigate>
              ) : (
                <item.element></item.element>
              )
            }
          >
            {item.children && renderhome(item.children)}
          </Route>
        );
      })
    );
  };
  return (
  // 使用Suspense组件包裹路由，设置加载时的fallback内容
    <Suspense fallback={<div>玩命加载中……</div>}>
      {/* 判断路由模式，如果是history模式，则使用BrowserRouter组件，否则使用HashRouter组件 */}
      {mode === "history" ? (
        <BrowserRouter>
          {/* 渲染路由 */}
          <Routes>{renderhome(router)}</Routes>
        </BrowserRouter>
      ) : (
        <HashRouter>
          {/* 渲染路由 */}
          <Routes>{renderhome(router)}</Routes>
        </HashRouter>
      )}
    </Suspense>
  );
};

export default routerView;
